<template>
	<view class="content-inner">
		<view>
			<!-- 包含运输时显示 -->
			<div class="content-top" v-if="allInfo.demand.split(',').includes('1')">
				<div class="content-time">
					<p class="time">{{ allInfo.create_at || '' }} </p>
					<p class="kind">{{ allInfo.goods_type == 0 ? $t('大件') : $t('小件') }} - {{ demandValue || '' }} </p>
				</div>

				<div class="colorSty">
					<div class="between items-start">
						<div class="flex route-item">
							<div style="text-align: center;">{{ get(allInfo, "departure.area_info.name") || '' }}</div>
						</div>
						<view class="line mt-15">
							<view v-if="allInfo.transfer_count !== 0" class="text">
								{{$t('途经')}}{{ allInfo.transfer_count }}
							</view>
							<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
						</view>
						<div class="flex route-item">
							<div style="text-align: center;">{{ get(allInfo, "reach.area_info.name") || '' }}</div>
						</div>
					</div>
					<div class="between items-start mt-10">
						<div class="address">
							<flag class="mt-6" :country="get(allInfo, 'departure.area_info.country')" />
							<p class="ml-8">{{ get(allInfo, "departure.area_info.mergename") || '' }}</p>
						</div>
						<div></div>
						<div class="address">
							<flag class="mt-6" :country="get(allInfo, 'reach.area_info.country')" />
							<p class="ml-8">{{ get(allInfo, "reach.area_info.mergename") || '' }}</p>
						</div>
					</div>
				</div>


			</div>

			<!-- 非运输时显示 -->
			<div v-else>
				<div class="content-time">
					<p class="time">{{$t('接单时间')}}：{{ allInfo.create_at || '' }} </p>
					<p class="kind">{{ allInfo.goods_type == 0 ? $t('大件') : $t('小件') }} - {{ demandValue || '' }} </p>
				</div>
				<div class="content-top px-23">
					<div class="between py-20" v-for="item in allInfo.demand_area">
						<div class="fz26 text-111">
							{{ demandList[item.demand] }}
						</div>
						<div class="fz22 flex color-666">
							<flag class="ico w-30 mr-8 mt-3" :country="get(item, 'area_info.country')" />
							<div>{{ get(item, "area_info.mergename") }}</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 非运输时显示 -->


			<ul class="content-info">
				<li class="info">
					<p class="info-title flex-shrink-0 mr-40">{{$t('货物信息')}}</p>
					<!-- <p class="info-content">{{[allInfo.cargoInfo1, allInfo.cargoInfo2, allInfo.cargoInfo3, allInfo.cargoInfo4].filter(item => item).join('/') || ''}}</p> -->
					<p class="info-content">{{
						[
							get(allInfo, "goods_info.title"),
							get(allInfo, "goods_info.goods_weight") + (allInfo.goods_type == 0 ? "吨" : "千克"),
							get(allInfo, "goods_info.goods_volume") + '立方米',
							get(allInfo, "goods_info.package.title")
						].filter(item => item).join('/') || '' }}</p>
				</li>
				<li class="info2">
					<p class="info-title lh-48">{{$t('业务需求')}}</p>
					<p>
						<!-- <BusiRequire :requireInfo = "allInfo.demand" /> -->
						<BusiRequire v-if="allInfo.goods_type == 0" :requireInfo="allInfo.demand" :isLoad="allInfo.is_load" :isStock="allInfo.is_stock" />
						<BusiRequire v-else requireInfo="1,2,3,4,5,6" />
					</p>
				</li>
				<li class="info2">
					<p class="info-title">{{$t('运输方式')}}</p>
					<p class="info-content">
						{{ transportList.filter(item => item.key == allInfo.transport_way)[0].value || '' }}
						-
						{{ allInfo.transport_type == 1 ? $t('整车') : $t('散货') }}
						<text v-if="get(allInfo, 'vehicle_info.title')">-</text>
						{{ get(allInfo, "vehicle_info.title") }}
					</p>
				</li>
				<li class="info2">
					<p class="info-title">{{$t('货主出价')}}</p>
					<p class="info-moeny" v-if="allInfo.price == 0">{{$t('等待报价')}}</p>
					<p class="info-moeny" v-else>
						{{ currencyUtils.getSymboleByCode(allInfo.price_unit) }}
						{{ allInfo.price || '' }}</p>
				</li>
			</ul>
			<p class="border-line"></p>
		</view>
		<view class="footer">
			<div class="footer-record">
				<p>
					<image class="footer-logo" src="/static/icon/share.png"></image>
					<span class="record-num">{{ get(allInfo, "attach.exposure_number") }}</span>
				</p>
				<p class="footer-module">
					<image class="footer-logo" src="/static/icon/eye.png"></image>
					<span class="record-num">{{ get(allInfo, "attach.lookat_number") }}</span>
				</p>
				<p class="footer-module">
					<image class="footer-logo" src="/static/icon/leaveWord.png"></image>
					<span class="record-num">{{ get(allInfo, "attach.comment_number") }}</span>
				</p>
			</div>
			<div class="footer-btn" @click="getInfo">
				<p>{{$t('查看详情')}}</p>
			</div>
		</view>
	</view>
</template>

<script>
import Country from 'pages/publish/enum/Country';
import BusiRequire from './busiRequire.vue'
export default {
	components: {
		BusiRequire
	},
	props: {
		allInfo: {},
		keyValue: ''
	},
	data() {
		return {
			transportList: [
				{
					key: '0',
					value: this.$t('不限')
				},
				{
					key: '1',
					value: '其他 '
				},
				{
					key: '2',
					value: this.$t('汽运')
				},
				{
					key: '3',
					value: this.$t('空运')
				},
				{
					key: '4',
					value: this.$t('海运')
				},
				{
					key: '5',
					value: this.$t('铁路')
				},
			],
			demandList: {
				1: this.$t('运输'),
				2: this.$t('报关'),
				3: this.$t('转关'),
				4: this.$t('清关'),
			},
			demandValue: "",
			requireList: [
				{
					src: '/static/icon/car.png',
					key: 0
				},
				{
					src: '/static/icon/excavator.png',
					key: 1
				},
				{
					src: '/static/icon/twoWay.png',
					key: 2
				},
				{
					src: '/static/icon/seal.png',
					key: 3
				},
				{
					src: '/static/icon/home.png',
					key: 4
				},
				{
					src: '/static/icon/cart.png',
					key: 5
				}
			]
		}
	},
	created() {
		if ((this.$props.allInfo.demand).split(",").length == 4) {
			this.demandValue = this.$t('运输、通关')
		} else {
			this.demandValue = (this.$props.allInfo.demand).split(",").map(item => this.demandList[item]).join("、")
		}
		// 使用 console.log 输出带有颜色和标题的信息
		// this.slog(this.allInfo)
	},
	mounted() {
	},
	methods: {
		goDetail() {
			console.log('33332323322')
			uni.navigateTo({
				url: `/pages/quotation/quotation?delivery_id=${this.$props.allInfo.id}`
			})
		},
		goFeedBack() {
			uni.navigateTo({
				url: "/pages/shipmentRecord/afterSalesFeedback"
			})
		},
		getInfo() {
			uni.navigateTo({
				url: `/pages/sourceInformation/sourceDeatil?id=${this.$props.allInfo.id}`
			})
		}
	}
}
</script>

<style lang="less">
.color-666 {
	color: #666;
}

.content-inner {
	width: 702rpx;
	height: 100%;
	margin: 0 auto;
	margin-top: 18rpx;
	border-radius: 26rpx;
	background-color: #fff;
	overflow: hidden;

	.content-info {
		width: 95%;
		padding-left: 0;
		margin-top: 15rpx;
		margin: 15rpx auto;

		.info2 {
			margin-top: 38rpx;
			display: flex;
			justify-content: space-between;

			.logo {
				width: 44rpx;
				height: 44rpx;
				margin-left: 20rpx;
				margin-top: 0;
				vertical-align: middle;
			}

			.info-title {
				color: #535353;
				font-size: 26rpx;
				font-weight: 400;
			}

			.info-content {
				color: #333333;
				font-weight: 600;
				font-size: 26rpx;
			}

			.info-moeny {
				color: #F53F3F;
				font-weight: 600;
				font-size: 28rpx;
			}
		}

		.info {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.logo {
				width: 44rpx;
				height: 44rpx;
				margin-left: 20rpx;
				margin-top: 0;
				vertical-align: middle;
			}

			.info-title {
				color: #535353;
				font-size: 26rpx;
				font-weight: 400;
			}

			.info-content {
				color: #333333;
				font-weight: 600;
				font-size: 26rpx;
			}

			.info-moeny {
				color: #F53F3F;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
	}
}

.border-line {
	width: 96%;
	height: 1rpx;
	margin-top: 35rpx;
	margin: 0 auto;
	background-color: #F0F0F0;
}

.content-top {
	width: 670rpx;
	// height: 218rpx;
	border-radius: 18rpx;
	background-color: #EDFAFF;
	margin: 0 auto;
	margin-top: 16rpx;
}

.content-time {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;

	.time {
		color: #535353;
		font-size: 24rpx;
		margin-top: 25rpx;
	}

	.kind {
		color: #333333;
		font-size: 24rpx;
		margin-top: 25rpx;
	}
}

.content-line {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;

	.begin {
		margin-top: 28rpx;

		.begin-logo {
			width: 48rpx;
			height: 34rpx;
			vertical-align: middle;
		}

		.begin-name {
			font-size: 27rpx;
			margin-left: 8rpx;
			font-weight: 600;
		}
	}

	.begin-arrow {
		width: 174rpx;
		height: 12rpx;
		/* margin-top: -15rpx; */
	}

	.begin-way {
		font-size: 26rpx;
		line-height: 0;
		color: #278AFF;
		font-weight: 500;
		text-align: center;
		margin-top: 38rpx;
	}
}

.content-city {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;

	.time {
		color: #666666;
		font-size: 22rpx;
		margin-top: 28rpx;
	}

	.kind {
		color: #666666;
		font-size: 22rpx;
		margin-top: 28rpx;
	}
}

.footer {
	width: 93%;
	padding-bottom: 16rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;

	.footer-record {
		display: flex;
		justify-content: flex-start;
		margin-top: 28rpx;

		.footer-logo {
			width: 26rpx;
			height: 24rpx;
			vertical-align: middle;
		}

		.record-num {
			font-size: 22rpx;
			color: #8C8C8C;
			margin-left: 9rpx;
			margin-top: 18rpx;
		}

		.footer-module {
			margin-left: 28rpx;
		}
	}

	.footer-btn {
		width: 322rpx;
		height: 68rpx;
		flex-shrink: 0;
		margin-top: 16rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);

		p {
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 68rpx;
			/* 92.857% */
		}
	}
}

.statusSty {
	font-size: 24rpx;
	color: #8C8C8C;
	line-height: 70rpx;
	margin-top: 10rpx;
}

.saleSty {
	font-size: 24rpx;
	line-height: 70rpx;
	margin-top: 10rpx;
	color: #F53F3F;
}

.colorSty {
	// min-height: 270rpx;
	margin: 40rpx 16rpx 20rpx 16rpx;
	padding-bottom: 20rpx;

	// margin-top: 40rpx;
	// margin-left: 16rpx;
	// margin-right: 16rpx;
	// margin-bottom: 20rpx;
	// display: flex;
	// justify-content: space-between;
	.beginDiv {
		width: 276rpx;
		height: 164rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.endDiv {
		width: 276rpx;
		height: 164rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.begin-name {
		font-size: 27rpx;
		margin-left: 8rpx;
		margin-top: 54rpx;
		font-weight: 600;
		text-align: right;
	}

	.end-name {
		font-size: 27rpx;
		margin-left: 8rpx;
		margin-top: 54rpx;
		font-weight: 600;
	}

	.begin-logo {
		width: 28rpx;
		height: 16rpx;
		vertical-align: middle;
		margin-top: 6rpx;
		object-fit: contain;
	}

	.begin-arrow {
		width: 114rpx;
		height: 12rpx;
	}

	.begin-way {
		font-size: 26rpx;
		line-height: 0;
		color: #278AFF;
		font-weight: 500;
		text-align: center;
	}

	.time {
		color: #666666;
		font-size: 22rpx;
		margin-left: 6rpx;
	}

	.kind {
		color: #666666;
		font-size: 22rpx;
		margin-left: 6rpx;
	}

	.boxSty {
		border-radius: 0 0 40rpx 40rpx;
	}

	.address {
		width: 250rpx;
		font-size: 22rpx;
		color: #999;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		.ico {
			flex-shrink: 0;
			width: 28rpx;
			height: 28rpx;
			margin-right: 6rpx;
			margin-top: 6rpx;
		}
	}

	.flag {
		width: 40rpx;
		height: 20rpx;
		background-color: #3c3;
		margin-right: 16rpx;
		flex-shrink: 0;
		margin-top: 10rpx;
	}

	.route-item {
		width: 276rpx;
		align-items: flex-start;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #1d1d1d;
	}

	.line {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.text {
			color: #278AFF;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 28rpx;
			// margin-top: 20rpx;
		}

		.ico {
			width: 114rpx;
		}
	}
}
</style>
